Arhitektura vtičnikov z JavaScript Module Federation: Gradnja dinamičnega sistema vtičnikov

V današnjem kompleksnem svetu spletnega razvoja je ključnega pomena gradnja modularnih, razširljivih in vzdrževanih aplikacij. Ena močna tehnika za doseganje tega je arhitektura vtičnikov, kjer je funkcionalnost razdeljena na neodvisne, dinamično naložene module. JavaScript Module Federation, funkcija Webpacka 5, ponuja robusten mehanizem za implementacijo takšnih arhitektur. Ta članek se poglobi v podrobnosti uporabe Module Federation za izgradnjo dinamičnega sistema vtičnikov.

Kaj je Module Federation?

Module Federation omogoča JavaScript aplikacijam dinamično deljenje kode med izvajanjem. To pomeni, da lahko modul (del kode) iz ene aplikacije neposredno uporablja druga aplikacija, ne da bi ga bilo treba ponovno graditi ali uvajati. To dosežemo z izpostavljanjem in uporabo modulov med različnimi gradnjami in celo različnimi implementacijami.

Tradicionalne metode deljenja kode, kot so npm paketi, zahtevajo ponovno gradnjo in uvajanje aplikacij, ki jih uporabljajo, vsakič, ko se posodobi skupna odvisnost. Module Federation odpravlja to breme, zaradi česar je idealen za scenarije, kjer so potrebne pogoste posodobitve in neodvisne implementacije.

Zakaj uporabiti Module Federation za arhitekture vtičnikov?

Module Federation ponuja več prednosti pri gradnji arhitektur vtičnikov:

• Dinamično nalaganje modulov: Vtičnike je mogoče nalagati in odstranjevati med izvajanjem, kar aplikacijam omogoča prilagajanje spreminjajočim se zahtevam brez potrebe po popolni ponovni uvedbi.
• Razdruževanje: Vtičniki se razvijajo in uvajajo neodvisno, kar zmanjšuje odvisnosti med različnimi deli aplikacije.
• Razširljivost: Aplikacijo je mogoče enostavno razširiti z novimi vtičniki, ne da bi to vplivalo na obstoječo funkcionalnost.
• Vzdrževanje: Vtičnike je mogoče posodabljati in vzdrževati neodvisno, kar zmanjšuje tveganje za vnos napak v osrednjo aplikacijo.
• Ponovna uporaba kode: Vtičnike je mogoče ponovno uporabiti v več aplikacijah, kar spodbuja doslednost in zmanjšuje razvojni napor.
• Upravljanje različic in povrnitve: Upravljate lahko različne različice vtičnikov in po potrebi enostavno povrnete na prejšnje različice.

Osnovni koncepti: gostiteljski in oddaljeni vsebniki

Module Federation temelji na dveh ključnih konceptih:

• Gostiteljski vsebnik (Host Container): Glavna aplikacija, ki uporablja oddaljene module (vtičnike).
• Oddaljeni vsebnik (Remote Container): Aplikacija, ki izpostavlja module (vtičnike) za uporabo s strani gostitelja.

Gostiteljski vsebnik dinamično pridobi oddaljeno vstopno datoteko iz oddaljenega vsebnika, ki vsebuje seznam izpostavljenih modulov. Gostitelj lahko nato dostopa do teh modulov in jih uporablja, kot da bi bili del njegove lastne kodne baze.

Implementacija dinamičnega sistema vtičnikov z Module Federation: Vodnik po korakih

Poglejmo si postopek gradnje preprostega sistema vtičnikov z uporabo Module Federation. Ustvarili bomo gostiteljsko aplikacijo in oddaljeno aplikacijo vtičnika.

1. Nastavitev gostiteljske aplikacije (gostiteljski vsebnik)

Najprej ustvarite nov imenik projekta in inicializirajte nov npm projekt:

            mkdir host-app
cd host-app
npm init -y
            

              
                Copy
              
            
          

Namestite Webpack in njegove odvisnosti:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Ustvarite datoteko `webpack.config.js` v imeniku `host-app` z naslednjo konfiguracijo:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3000,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Host',
      remotes: {
        'plugin': 'Plugin@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Pojasnilo:

• `name`: Ime gostiteljske aplikacije.
• `remotes`: Določa oddaljene vsebnike, ki jih bo gostitelj uporabljal. V tem primeru uporablja oddaljeni vsebnik z imenom `plugin` iz `http://localhost:3001/remoteEntry.js`. Sintaksa `Plugin@` pomeni, da je `name` v ModuleFederationPlugin oddaljenega vsebnika 'Plugin'.
• `shared`: Seznam odvisnosti, ki so v skupni rabi med gostiteljskim in oddaljenimi vsebniki. To preprečuje nalaganje podvojenih kopij teh odvisnosti. Uporaba `shared` je ključna za preprečevanje napak in zagotavljanje pravilnega delovanja vtičnika.

Ustvarite imenik `src` in dodajte datoteko `index.js` z naslednjo vsebino:

            import React, { Suspense } from 'react';
import ReactDOM from 'react-dom/client';

const PluginComponent = React.lazy(() => import('plugin/PluginComponent'));

const App = () => {
  return (
    <div>
      <h1>Host Application</h1>
      <Suspense fallback={<div>Loading Plugin...</div>}>
        <PluginComponent />
      </Suspense>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

            

              
                Copy
              
            
          

Pojasnilo:

• Uporabljamo `React.lazy` za dinamični uvoz komponente `PluginComponent` iz oddaljenega `plugin` vsebnika. To je ključno za leno nalaganje vtičnika in preprečevanje zamud pri začetnem nalaganju.
• Komponenta `Suspense` se uporablja za obravnavo stanja nalaganja, medtem ko se vtičnik pridobiva.

Ustvarite imenik `public` in dodajte datoteko `index.html` z naslednjo vsebino:

            <!DOCTYPE html>
<html>
<head>
  <title>Host Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Dodajte konfiguracijsko datoteko za Babel `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Posodobite svoj `package.json` z zagonskim skriptom:

            {
  "name": "host-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

2. Nastavitev oddaljene aplikacije (vsebnik vtičnika)

Ustvarite nov imenik projekta za vtičnik:

            mkdir plugin-app
cd plugin-app
npm init -y
            

              
                Copy
              
            
          

Namestite Webpack in njegove odvisnosti:

            npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
            

              
                Copy
              
            
          

Ustvarite datoteko `webpack.config.js` v imeniku `plugin-app` z naslednjo konfiguracijo:

            const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3001,
    hot: true,
    static: {
      directory: path.join(__dirname, 'dist'),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Plugin',
      filename: 'remoteEntry.js',
      exposes: {
        './PluginComponent': './src/PluginComponent',
      },
      shared: ['react', 'react-dom'],
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

            

              
                Copy
              
            
          

Pojasnilo:

• `name`: Ime oddaljenega vsebnika (vtičnika). To se mora ujemati z imenom, uporabljenim v konfiguraciji `remotes` gostitelja.
• `filename`: Ime oddaljene vstopne datoteke, ki jo bo gostitelj pridobil.
• `exposes`: Določa module, ki jih izpostavlja oddaljeni vsebnik. V tem primeru izpostavljamo modul `PluginComponent`. Ključ './PluginComponent' se uporablja v uvozni izjavi gostitelja (npr. `import('plugin/PluginComponent')`).
• `shared`: Enako kot pri gostitelju, seznam deljenih odvisnosti. Ključno je, da so deljene odvisnosti in njihove različice združljive med gostiteljem in oddaljenim vsebnikom.

Ustvarite imenik `src` in dodajte datoteko `PluginComponent.jsx` z naslednjo vsebino:

            import React from 'react';

const PluginComponent = () => {
  return (
    <div style={{border: '1px solid blue', padding: '10px'}}>
      <h2>Plugin Component</h2>
      <p>This is a dynamically loaded plugin!</p>
    </div>
  );
};

export default PluginComponent;

            

              
                Copy
              
            
          

Ustvarite datoteko `index.js` v imeniku `src` za izvoz komponente PluginComponent:

            import PluginComponent from './PluginComponent';

export default PluginComponent;
            

              
                Copy
              
            
          

Ustvarite imenik `public` in dodajte datoteko `index.html` z naslednjo vsebino:

            <!DOCTYPE html>
<html>
<head>
  <title>Plugin Application</title>
</head>
<body>
  <div id="root"></div>
  <script src="./bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Dodajte konfiguracijsko datoteko za Babel `.babelrc`:

            {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
            

              
                Copy
              
            
          

Posodobite svoj `package.json` z zagonskim skriptom:

            {
  "name": "plugin-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
            

              
                Copy
              
            
          

3. Zagon aplikacij

Zaženite obe, gostiteljsko in vtičniško aplikacijo, z zagonom ukaza `npm start` v njunih ustreznih imenikih.

V brskalniku odprite `http://localhost:3000`. Morali bi videti gostiteljsko aplikacijo z dinamično naloženo komponento vtičnika.

Napredne funkcije in premisleki

Upravljanje različic in povrnitve

Module Federation podpira upravljanje različic, kar vam omogoča upravljanje različnih verzij vtičnikov. Omejitve različic lahko določite v konfiguraciji `remotes` gostitelja. Na primer:

            remotes: {
  'plugin': 'Plugin@http://localhost:3001/remoteEntry.js@1.0.0',
}
            

              
                Copy
              
            
          

To gostitelju pove, naj uporabi različico 1.0.0 vtičnika. Če je na voljo novejša različica, bo gostitelj še naprej uporabljal določeno različico, dokler je ne posodobite izrecno. Implementacija robustnega upravljanja različic je ključna za preprečevanje prelomnih sprememb in zagotavljanje stabilnosti aplikacije.

Varnostni premisleki

Pri uporabi Module Federation je varnost najpomembnejša. Upoštevajte naslednje:

• Avtentikacija in avtorizacija: Implementirajte ustrezne mehanizme za avtentikacijo in avtorizacijo, da zagotovite, da lahko samo pooblaščeni uporabniki dostopajo in uporabljajo vtičnike.
• Integriteta kode: Preverite integriteto oddaljenih modulov, da preprečite vbrizgavanje zlonamerne kode v aplikacijo. Razmislite o uporabi politike varnosti vsebine (Content Security Policy - CSP) za omejitev virov, iz katerih lahko aplikacija nalaga vire.
• Upravljanje odvisnosti: Skrbno upravljajte odvisnosti tako gostiteljskih kot oddaljenih vsebnikov, da se izognete ranljivostim. Redno posodabljajte odvisnosti na najnovejše različice.
• Validacija vnosov: Validirajte vse podatke, prejete iz oddaljenih modulov, da preprečite napade z vbrizgavanjem.
• CORS (Cross-Origin Resource Sharing): Pravilno konfigurirajte CORS, da omogočite gostiteljski aplikaciji dostop do oddaljene vstopne datoteke iz aplikacije vtičnika.

Odkrivanje in upravljanje vtičnikov

Za bolj zapletene sisteme vtičnikov boste morda potrebovali mehanizem za odkrivanje in upravljanje vtičnikov. To je mogoče doseči z registrom vtičnikov ali storitvijo za odkrivanje. Osrednji register lahko hrani informacije o razpoložljivih vtičnikih, vključno z njihovo lokacijo, različico in odvisnostmi. Gostiteljska aplikacija lahko nato poizveduje po registru, da najde in naloži ustrezne vtičnike.

Razmislite o teh pristopih:

• Centralizirana konfiguracija: Shranite URL-je vtičnikov v centralno konfiguracijsko datoteko (npr. JSON datoteko), ki jo gostiteljska aplikacija prebere med izvajanjem. To vam omogoča enostavno dodajanje, odstranjevanje ali posodabljanje vtičnikov brez ponovnega uvajanja gostiteljske aplikacije.
• Odkrivanje na osnovi API-ja: Ustvarite API končno točko, ki vrača seznam razpoložljivih vtičnikov. Gostiteljska aplikacija lahko nato pridobi ta seznam in dinamično naloži vtičnike.
• Arhitektura, vodena z dogodki: Uporabite dogodkovno vodilo (event bus) ali sporočilno vrsto (message queue) za obveščanje gostiteljske aplikacije, ko so na voljo novi vtičniki. To omogoča asinhrono odkrivanje in nalaganje vtičnikov.

Dinamična konfiguracija in aktivacija vtičnikov

Omogočanje uporabnikom, da dinamično konfigurirajo in aktivirajo vtičnike, je močna funkcija. To zahteva mehanizem za shranjevanje in upravljanje konfiguracij vtičnikov. Za shranjevanje nastavitev vtičnikov lahko uporabite bazo podatkov, konfiguracijsko datoteko ali storitev za konfiguracijo v oblaku. Gostiteljska aplikacija lahko nato prebere te nastavitve med izvajanjem in ustrezno aktivira vtičnike. Razmislite o zagotovitvi uporabniškega vmesnika za upravljanje konfiguracij vtičnikov.

Obravnavanje asinhronih operacij in napak

Pri delu z dinamično naloženimi vtičniki je bistveno, da asinhrono delovanje in napake obravnavate elegantno. Uporabite `async/await` ali Promises za upravljanje asinhrone kode. Implementirajte ustrezno obravnavo napak za zajemanje in beleženje morebitnih napak, ki se pojavijo med nalaganjem ali izvajanjem vtičnika. Uporabniku zagotovite informativna sporočila o napakah. Razmislite o uporabi centralizirane storitve za beleženje napak za sledenje napakam v vseh vtičnikih.

Razdeljevanje kode in optimizacija delovanja

Za optimizacijo delovanja uporabite razdeljevanje kode (code splitting), da razdelite aplikacijo in vtičnike na manjše kose. To brskalniku omogoča prenos samo tiste kode, ki je potrebna za določeno stran ali funkcijo. Webpack nudi vgrajeno podporo za razdeljevanje kode. Razmislite o uporabi lenega nalaganja (lazy loading) za nalaganje vtičnikov samo takrat, ko so potrebni. Minificirajte in stisnite kodo, da zmanjšate velikost datotek.

Testiranje in neprekinjena integracija

Temeljito testirajte svoj sistem vtičnikov, da zagotovite njegovo pravilno delovanje. Napišite enotske teste, integracijske teste in teste od konca do konca (end-to-end). Uporabite sistem za neprekinjeno integracijo (CI) za samodejno izvajanje testov ob vsaki spremembi kode. Implementirajte cevovod za neprekinjeno dostavo (CD) za avtomatizacijo uvajanja aplikacije in vtičnikov.

Primeri in primeri uporabe iz resničnega sveta

Module Federation se uporablja v različnih aplikacijah v resničnem svetu, vključno z:

• Platforme za e-trgovino: Dinamično nalaganje priporočil za izdelke, plačilnih prehodov in ponudnikov pošiljanja. Na primer, globalna platforma za e-trgovino bi lahko uporabila Module Federation za integracijo različnih ponudnikov plačil glede na lokacijo stranke. V Severni Ameriki bi lahko naložila vtičnik za Stripe, medtem ko bi v Evropi lahko naložila vtičnik za PayPal ali Klarno.
• Sistemi za upravljanje vsebin (CMS): Omogočanje uporabnikom, da namestijo in aktivirajo vtičnike za razširitev funkcionalnosti CMS-a. CMS bi lahko uporabnikom omogočil namestitev vtičnikov za SEO optimizacijo, integracijo družbenih medijev ali analitiko vsebine.
• Nadzorne plošče in analitične platforme: Dinamično nalaganje različnih gradnikov in vizualizacij. Globalna analitična platforma bi lahko naložila vtičnike za različne vire podatkov, kot so Google Analytics, Adobe Analytics ali Salesforce.
• Arhitekture mikro-sprednjih vmesnikov (Microfrontend): Gradnja obsežnih spletnih aplikacij kot zbirke neodvisno uvedenih mikro-sprednjih vmesnikov. Veliko podjetje bi lahko uporabilo Module Federation za gradnjo svoje spletne aplikacije kot zbirke mikro-sprednjih vmesnikov, od katerih je vsak odgovoren za določeno poslovno funkcijo, kot so upravljanje računov, katalog izdelkov ali obdelava naročil.
• Sistemi za oblikovanje (Design Systems): Deljenje UI komponent in oblikovalskih žetonov med več aplikacijami. Globalna organizacija z več blagovnimi znamkami bi lahko uporabila Module Federation za deljenje skupnega sistema za oblikovanje med vsemi svojimi aplikacijami, kar zagotavlja doslednost in zmanjšuje razvojni napor.

Najboljše prakse za gradnjo dinamičnih sistemov vtičnikov z Module Federation

Tukaj je nekaj najboljših praks, ki jih je treba upoštevati pri gradnji dinamičnih sistemov vtičnikov z Module Federation:

• Ohranjajte vtičnike majhne in osredotočene: Vsak vtičnik naj bo odgovoren za določen del funkcionalnosti. To olajša vzdrževanje in posodabljanje vtičnikov.
• Določite jasne vmesnike vtičnikov: Določite jasne vmesnike za interakcijo vtičnikov z gostiteljsko aplikacijo. To zagotavlja, da so vtičniki združljivi z gostiteljem in preprečuje prelomne spremembe.
• Uporabljajte semantično različiciranje: Uporabljajte semantično različiciranje za upravljanje različic vaših vtičnikov. To olajša sledenje spremembam in zagotavljanje združljivosti.
• Zagotovite dokumentacijo: Zagotovite jasno in jedrnato dokumentacijo za svoje vtičnike. To pomaga uporabnikom razumeti, kako namestiti, konfigurirati in uporabljati vtičnike.
• Implementirajte varnostne najboljše prakse: Upoštevajte varnostne najboljše prakse za zaščito vaše aplikacije in vtičnikov pred ranljivostmi.
• Spremljajte delovanje vtičnikov: Spremljajte delovanje svojih vtičnikov, da prepoznate morebitna ozka grla. Optimizirajte kodo za izboljšanje delovanja.
• Avtomatizirajte uvajanje: Avtomatizirajte uvajanje vaše aplikacije in vtičnikov. To zmanjšuje tveganje za napake in zagotavlja hitro uvajanje posodobitev.
• Uporabljajte dosleden slog kodiranja: Uveljavite dosleden slog kodiranja v vseh vtičnikih. To olajša branje in vzdrževanje kode.
• Pišite enotske teste: Pišite enotske teste za svoje vtičnike, da zagotovite njihovo pravilno delovanje.
• Uporabljajte linter: Uporabljajte linter za samodejno preverjanje napak v vaši kodi.

Zaključek

JavaScript Module Federation ponuja močan in prilagodljiv mehanizem za gradnjo dinamičnih sistemov vtičnikov. Z izkoriščanjem Module Federation lahko ustvarite modularne, razširljive in vzdrževane aplikacije, ki se lahko prilagajajo spreminjajočim se zahtevam. Z upoštevanjem najboljših praks, opisanih v tem članku, lahko zgradite robustne in varne sisteme vtičnikov, ki ustrezajo potrebam vaše organizacije.

Ta tehnologija je še posebej dragocena v mednarodnih kontekstih, saj podjetjem omogoča, da svoje programske ponudbe prilagodijo določenim regijam ali segmentom strank, ne da bi morali uvajati popolnoma ločene aplikacije. Od integracije lokalnih plačilnih prehodov do dostave vsebin, specifičnih za regijo, Module Federation omogoča bolj personalizirano in učinkovito uporabniško izkušnjo po vsem svetu.